@blueprintjs/core

What is @blueprintjs/core?

@blueprintjs/core is a React-based UI toolkit for the web that provides a set of high-quality, customizable components. It is designed to help developers build complex and data-dense interfaces with ease.

What are @blueprintjs/core's main functionalities?

Buttons

Blueprint provides a variety of button components with different intents, sizes, and states. This example demonstrates a primary button with the text 'Click Me'.

import { Button } from '@blueprintjs/core';

function App() {
  return <Button intent="primary" text="Click Me" />;
}

Dialogs

Blueprint's Dialog component is used to create modal dialogs. This example shows how to open and close a dialog with a button click.

import { Dialog, Button } from '@blueprintjs/core';
import { useState } from 'react';

function App() {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <div>
      <Button onClick={() => setIsOpen(true)} text="Open Dialog" />
      <Dialog isOpen={isOpen} onClose={() => setIsOpen(false)} title="Dialog Title">
        <div className="bp3-dialog-body">
          This is the dialog content.
        </div>
        <div className="bp3-dialog-footer">
          <Button onClick={() => setIsOpen(false)} text="Close" />
        </div>
      </Dialog>
    </div>
  );
}

Forms

Blueprint provides form components like FormGroup and InputGroup to create well-structured forms. This example demonstrates a simple login form with username and password fields.

import { FormGroup, InputGroup, Button } from '@blueprintjs/core';

function App() {
  return (
    <form>
      <FormGroup label="Username" labelFor="username-input">
        <InputGroup id="username-input" placeholder="Enter your username" />
      </FormGroup>
      <FormGroup label="Password" labelFor="password-input">
        <InputGroup id="password-input" placeholder="Enter your password" type="password" />
      </FormGroup>
      <Button intent="primary" text="Submit" type="submit" />
    </form>
  );
}

Tables

Blueprint's Table component is used to create data tables. This example shows a table with two columns and five rows, where each cell displays its row index.

import { Table, Column, Cell } from '@blueprintjs/table';

function App() {
  const cellRenderer = (rowIndex) => <Cell>{`Row ${rowIndex}`}</Cell>;
  return (
    <Table numRows={5}>
      <Column name="Column 1" cellRenderer={cellRenderer} />
      <Column name="Column 2" cellRenderer={cellRenderer} />
    </Table>
  );
}

Other packages similar to @blueprintjs/core

material-ui

Material-UI is a popular React UI framework that implements Google's Material Design. It offers a wide range of components and customization options, similar to Blueprint, but with a different design philosophy focused on Material Design principles.

ant-design

Ant Design is a comprehensive UI framework for React that provides a large set of high-quality components. It is similar to Blueprint in terms of functionality but follows a different design language inspired by enterprise-level applications.

semantic-ui-react

Semantic UI React is the official React integration for Semantic UI. It provides a set of components that are easy to use and customize, similar to Blueprint, but with a focus on semantic HTML and a different design aesthetic.

README

Blueprint Core Components

Blueprint is a React UI toolkit for the web.

This package contains the core set of UI components as CSS and React code.

Installation

npm install --save @blueprintjs/core

Full Documentation | Source Code